<template>
  <div id="baoyou">
    <down-tip></down-tip>
    <header-bar :title="title" :goBack="goBack"></header-bar>
    <sticky top="0px" z-ndex="100000">
      <div class="scroller ">
        <scroller lock-y :scrollbar-x="false" :bounce="false">
          <top-nav @nav-item-click="navItemclick" :navList="navList" :itemWidth="itemWidth"></top-nav>
        </scroller>
      </div>
    </sticky>

    <list-item :couponListData="couponListData" @toTaobao="toTaobao"></list-item>

    <show-bottom :showBottom="showBottom"></show-bottom>

  </div>
</template>
<script>
  import TabBar from 'src/components/common/TabBar.vue'
  import HeaderBar from 'src/components/common/headerBar.vue'
  import TopNav from 'src/components/common/TopNav.vue'
  import DownTip from 'src/components/common/downTip'
  import ListItem from 'src/components/common/jiukuaijiuList'
  import ShowBottom from 'src/components/common/bottomShow'
  import {Scroller} from 'vux'
  import Sticky from 'vue-sticky-position';
  import {URI_GETTYPE, RUI_GETTYPECOUPON} from 'src/const/uri'
  import MDUtils from 'src/assets/js/md-utils'

  export default {
    components: {TabBar, Scroller, Sticky, HeaderBar, TopNav, DownTip, ListItem, ShowBottom},
    data() {
      return {
        title: '19.9精品',
        goBack: true,
        navList: [],
        currentIndex: 0,
        itemWidth: 80,
        reqPage: 1,
        reqPageSize: 10,
        goodCatId: 0, //0 指的是全部
        couponListData: [],
        sw: true,//控制开关
        isWx: MDUtils.isWx(),
        showBottom: false
      }
    },
    created() {
      this.getList();
      this.initData();
    },
    mounted() {
      let spinner = document.getElementsByClassName('spinner')[0];
      spinner.style.display = 'none';
      let baoyou = document.getElementById('baoyou');// 文档高度
      window.addEventListener('scroll', () => {
        // 判断是否滚动到底部
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (scrollTop + document.documentElement.clientHeight >= baoyou.offsetHeight - 200) {
          if (this.sw == true) {
            this.reqPage += 1;
            this.sw = false;
            this.initData();
          }
        }
        if (scrollTop > 100) {
          this.showBottom = true;
        } else {
          this.showBottom = false;
        }
      })
    },
    methods: {
      getList() {
        this.$ajax.get(URI_GETTYPE, {}, (res) => {
          this.navList = res.data;
          // console.log('navList');
          //console.log(this.navList);
        });
      },
      initData() {
        this.$ajax.get(RUI_GETTYPECOUPON, {
          reqPage: this.reqPage,
          reqPageSize: this.reqPageSize,
          goodCatId: this.goodCatId,//商品分类Id （0 代表全部）
          promotionTypeId: 1,
          type: 2
        }, (res) => {
          console.log(res);
          this.couponListData = this.couponListData.concat(res.data.data);
          this.sw = true;
          if (res.data.data.length < 10) {
            //说明没数据了
            this.sw = false;
          }
          ;
        });
      },

      navItemclick(val) {
        //console.log(val);
        this.goodCatId = val;
        this.couponListData = [];
        this.initData();
      },
      toTaobao(item) {
        if (this.isWx) {
          let beforeUrl = document.URL.replace(/19.9jingpin/g, "isWxOpen").split('?')[0];
          let toUrl = `${beforeUrl}?link=${item}`;
          window.location.href = toUrl;
        } else {
          window.location.href = item
        }
      }

    }
  }
</script>
<style lang="less" scoped>
  @import "baoyou";

  .scroller {
    background: rgba(0, 0, 0, .8);
    color: #fff;
  }
</style>
